<template>
  <div id="CMap" style="width: auto; height: 100%;">
    <el-amap vid="CMap" :center="center" :zoom="zoom" :events="events" :map-style="mapStyle">
      <el-amap-marker
        v-for="(marker, index) in markers"
        :key="index"
        :position="marker.position"
        :title="marker.name"
        @click="handleMarkerClick(marker)"
      />
    </el-amap>
  </div>
</template>

<script>
import { getMarker} from "@/api/ech";

export default {
  name: 'CMap',
  data() {
    return {
      center: [116.397428, 39.90923], // 初始地图中心点
      zoom: 11, // 初始地图缩放级别
      markers: [], // 标记数据
      mapStyle: 'amap://styles/whitesmoke', // 地图样式
      events: {
        init() {
          // 地图初始化完成后的操作
        }
      }
    };
  },
  mounted() {
    this.fetchMarkers();
  },
  methods: {
    fetchMarkers() {
      getMarker().then(res => {
        if (res.code === 200) {
          this.markers = res.data;
          this.center = this.markers[0].position; // 设置地图中心点为第一个标记的位置
        } else {
          alert(res.msg);
        }
      }).catch(error => {
        console.error('Error fetching markers:', error);
      });
    },
    handleMarkerClick(marker) {
      this.center = marker.position; // 点击标记点时，将地图中心移动到该标记点的位置
    }
  }
};
</script>

<style scoped>
#CMap {
  margin: 0 auto;
}
</style>
